<template>
  <div style="display: flex;flex-direction: column;width: 100%">
    <Header :activeName="activeName"></Header>
    <div style="display: flex;margin-top: 90px;height: 30px;line-height: 30px;justify-content: center;">
      <el-breadcrumb :separator-icon="ArrowRight" style="height: 30px;width: 80%;align-items: center;line-height: 30px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: '/coach'}">教练团队</el-breadcrumb-item>
        <el-breadcrumb-item>教练信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="main">
      <div class="detail-container">
        <div class="detail-img-c">
          <img :src="coach.pic" alt="跑步"/>
        </div>
<!--        <el-carousel class="detail-img-c" height="500px">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="@/assets/paobu.jpg" alt="跑步"/>
          </el-carousel-item>
        </el-carousel>-->
        <div style="flex-grow: 1">
          <el-tabs v-model="activeTab" class="detail-tabs" @tab-click="handleClick">
            <el-tab-pane label="教练简介" name="first" style="color: #000000">
              <el-row :gutter="20">
                <el-col :span="4">教练姓名:</el-col><el-col :span="20" style="text-align: left;color: red">{{coach.realName}}</el-col>
              </el-row>
              <el-row style="margin-top: 20px">
                <el-col :span="4">擅长领域:</el-col><el-col :span="20" style="text-align: left;color: red">{{coach.domain}}</el-col>
              </el-row>
              <el-row style="margin-top: 20px">
                <el-col :span="4">教学经验:</el-col><el-col :span="20" style="text-align: left;">{{coach.resume}}</el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="教授课程" name="third" style="color: #000000">
              <div v-for="c in coachCourses" >
                <el-row :gutter="20">
                  <el-col :span="4">课程名称:</el-col>
                  <el-col :span="20" style="text-align: left;color: red"><a :href="'/course/detail?cid='+c.id">{{c.name}}</a></el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-divider border-style="dashed"></el-divider>
      <div class="detail-comment-c">
          <div style="display: flex;">
            <div style="width: 50px;height: 100%">
              <el-avatar style="width: 50px;" :size="50" :src="user.avatar" />
            </div>
            <div style="flex-grow: 1;padding: 10px;">
              <p style="height: 20px;line-height: 20px;color:#fb7299" class="d-c-m-n">
                {{user.username}}
              </p>
              <el-input v-model="comment" type="textarea" :autosize="{ minRows: 5 }">

              </el-input>
              <el-button size="large" type="primary" style="margin-top: 5px;" @click="publish">发布</el-button>
              <el-divider></el-divider>
            </div>
          </div>
          <div style="display: flex;" v-for="c in comments" :key="c.id">
            <div style="width: 50px;height: 100%">
              <el-avatar style="width: 50px;" :size="50" :src="c.avatar" />
            </div>
            <div style="flex-grow: 1;padding: 10px;">
              <p style="height: 20px;line-height: 20px;color:#fb7299" class="d-c-m-n">
                {{c.author}}
              </p>
              <p style="color: #000000;font-size: 18px;margin-top: 10px;">
                {{c.content}}
              </p>
              <p style="color: #6f6f6f;font-size: 18px;margin-top: 10px">{{c.createTime}}</p>
              <el-divider></el-divider>
            </div>
          </div>
      </div>
    </main>
    <BackTop></BackTop>
    <Footer></Footer>
  </div>

</template>

<script setup lang="ts">
  import Header from '@/components/header/Header.vue'
  import Footer from '@/components/header/Footer.vue'
  import BackTop from '@/components/BackTop.vue'
  import Breadcrumb from '@/components/Breadcumb.vue'
  // import LatestGoods from '@/components/indexDecorate/decorateList/LatestGoods.vue'

  import {onMounted, ref} from 'vue'
  import {useRouter} from "vue-router";
  import {ArrowRight} from "@element-plus/icons-vue";
  import {ElMessage, type TabsPaneContext} from 'element-plus'
  import storage from "@/utils/storage.ts";
  import {courseDetail, coursePlans} from "@/api/course.ts";
  import {addCoachComment, coachCommentsPage, coachDetail, getCoachScheduleCourses} from "@/api/coach.ts";

  const activeTab = ref('first')
  const router = useRouter()
  const activeName = router.currentRoute.value.path
  const comment = ref()
  const comments = ref([])
  const coach = ref({})
  const coachId = ref()
  const courseName = ref()
  const coachName = ref('')
  const user = ref({})
  const coachCourses = ref([])

  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }

  const publish = () => {
    const commentData = {
      content: comment.value,
      author: user.value.username,
      memberId: user.value.id,
      coachId: router.currentRoute.value.query.cid,
    }
    addCoachComment(commentData).then(res => {
      commentsPage()
    })
  }

  const commentsPage = () => {
    coachCommentsPage({coachId: coachId.value}).then(res => {
      comments.value = res.data.records;
    })
  }

  onMounted(()=>{
    user.value = JSON.parse(storage.getItem("userInfo"))
    console.log(router.currentRoute.value.query)
    coachId.value = router.currentRoute.value.query.cid
    coachDetail({id: coachId.value}).then(res => {
      coach.value = res.data
      coachName.value = res.data.name
    })
    getCoachScheduleCourses({coachId:coachId.value}).then(res => {
      coachCourses.value = res.data
    })
    commentsPage()
  })
</script>
<style scoped>
.main {
  width: 80%;
  position: relative;
  top: 20px;
  margin: auto;
  box-sizing: border-box;
  padding: 2px;
  border-top: 1px solid #4a4949;
  background-color: #fbf8f8;
}
.detail-container {
  display: flex;
  justify-content: start;
  flex-flow: row nowrap;
  //border-bottom: 1px solid #a8a2a2;
}
.course{
  width: 230px;
  height: 350px;
  margin-top: 10px;
  border: 1px solid #000000;
  transition: all 0.5s;
}
.detail-img-c{
  width: 500px;
  height: 500px;
  text-align: center;
  border-radius: 15px;
  overflow: hidden;
}
.detail-img-c img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.course-category {
  height: 30px;
  font-weight: bold;
  font-size: 20px;
  line-height: 30px;
}
.overflow-wrap-ellipsis {
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.course:hover {
  cursor: pointer;
  transform: scale(1.03);
}
.detail-tittle{
  font-size: 30px;
  display: flex;
  justify-content: center;
  color: #000000;
  position: relative;
}
.detail-tittle::after{
  content: "";
  width: 40px;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.detail-tabs{
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
}
.detail-comment-c{
  border: 1px solid #ccc;
  padding-left: 10px;
  min-height: 800px;
}
.detail-comment-tittle{
  height: 50px;
  font-size: 20px;
  color: #938f8f
}
</style>
